﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>业务类配置</title>
<link rel="stylesheet" href="../frame/layui/css/layui.css">
<link rel="stylesheet" href="../frame/static/css/style.css">
<link rel="icon" href="../frame/static/image/code.png">
</head>
<body class="body">
	<!-- 工具集 -->
	<div class="my-btn-box">
		<span class="fl">
	        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
	        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
	    </span>
	    <span class="fr">
	        <span class="layui-form-label">搜索条件：</span>
	        <div class="layui-input-inline">
	            <input type="text" autocomplete="off" placeholder="请输入搜索条件"  id="searchTxt" class="layui-input">
	        </div>
	        <button class="layui-btn mgl-20" id='searchBtn' data-type="getInfo">查询</button>
	    </span>
	</div>
	
	<!-- 表格 -->
	<div id="dateTable">
		<table class="layui-hide" id="layer_table" lay-filter="useruv"></table>
	</div>
	
	<script type="text/javascript" src="../frame/layui/layui.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
	var tableIns;
    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {
        // 操作对象
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTable = layui.vip_table
                , $ = layui.jquery;

        // 表格渲染
        tableIns = table.render({
            elem: '#layer_table'                  //指定原始表格元素选择器（推荐id选择器）
            , height: vipTable.getFullHeight()    //容器高度
            , cols: [[                  //标题栏
                {field: 'server', title: '服务名', width: 500}
                , {field: 'scope', title: '作用域', width: 200}
                , {field: 'scopeName', title: '作用域名称', width: 500}
                , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataCheck'
            , url: '/api/conf/listConf'
            , method: 'post'
            , page: true
            , where:{'type':1}
       		, limits: [10, 20, 40, 80, 120, 240]
            , limit: 20 //默认采用30
            , loading: false
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            }
        });
       
        // 刷新
        $('#btn-refresh').on('click', function () {
            tableIns.reload();
        });
        
     	// 新增
        $('#btn-add').on('click', function () {
        	layer.open({
				type : 2 //Page层类型
				,
				area : [ '900px', '700px' ],
				title : '新增',
				shade : 0.6 //遮罩透明度
				,
				maxmin : true //允许全屏最小化
				,
				anim : 1 //0-6的动画形式，-1不开启
				,
				content : '/page/editConf.html',
				success : function(layero, index) {
					var body = layer.getChildFrame('body', index);
					var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
					var ids = iframeWin.reset(null,0);//调用子页面的方法，得到子页面返回的ids
				}
			});
        });

        $('#searchBtn').on('click',function(){
        	 var type = $(this).data('type');
        	 active[type] ? active[type].call(this) : '';
        });
        var active = {
        	getInfo: function () {
        		var searchTxt =$('#searchTxt').val();
        		var wheres = {};
        		wheres.server  =searchTxt;
        		wheres.type  =1;
        		tableIns.reload({where:wheres});
        	}
        };
        table.on('tool(useruv)', function(obj){
            var data = obj.data;
            if(obj.event === 'mod'){
            	layer.open({
    				type : 2 //Page层类型
    				,
    				area : [ '900px', '700px' ],
    				title : '编辑',
    				shade : 0.6 //遮罩透明度
    				,
    				maxmin : true //允许全屏最小化
    				,
    				anim : 1 //0-6的动画形式，-1不开启
    				,
    				content : '/page/editConf.html',
    				success : function(layero, index) {
    					var body = layer.getChildFrame('body', index);
    					var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
    					var ids = iframeWin.reset(data,0);//调用子页面的方法，得到子页面返回的ids
    				}
    			});
            } else if(obj.event === 'del'){
            	layer.confirm('确认删除?', function(index){
            		$.ajax({
        				type : "get", //提交方式  
        				url : "/api/conf/delConf",//路径  
        				data : {
        					"sid" : data.sid
        				},//数据，这里使用的是Json格式进行传输  
        				dataType : 'json', //返回的数据格式：json/xml/html/script/jsonp/text
        				success : function(result) {//返回数据根据结果进行相应的处理  
        					layer.msg(result.msg);
        					window.location.reload();
        				},
        				error : function() {
        					layer.msg('系统异常');
        				}
        			});
             	 });
            } else if(obj.event === 'his'){
            	layer.open({
    				type : 2 //Page层类型
    				,
    				area : [ '900px', '600px' ],
    				title : '配置历史版本',
    				shade : 0.6 //遮罩透明度
    				,
    				maxmin : true //允许全屏最小化
    				,
    				anim : 1 //0-6的动画形式，-1不开启
    				,
    				content : '/page/confHis.html',
    				success : function(layero, index) {
    					var body = layer.getChildFrame('body', index);
    					var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
    					var ids = iframeWin.reset(data);//调用子页面的方法，得到子页面返回的ids
    				}
    			});
              }
          });
    });
    </script>
    <!-- 表格操作按钮集 -->
	<script type="text/html" id="barOption">
    	<a class="layui-btn layui-btn-mini" lay-event="mod">修改</a>
    	<a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="his">历史</a>
	</script>
</body>
</html>